<template>
	<!-- 登录页面 -->
	<view class="safe-area-inset-bottom login-content">
		<view class="logo-box">
			<image src="/static/logo.png" mode="widthFix" style="width: 30%; border-radius: 20rpx; margin-top: 200rpx;">
			</image>
		</view>
		<view class="line"></view>
		<view class="pad-30 form-box">
			<view class="main-title">完善您的个人信息</view>
			<view class="sub-title">请完善您的个人信息，以便我们为您提供更好的服务</view>
			<view class="">
				<view class="avatar-container">
					<view class="avatar-txt">头像</view>
					<view class="avatar-img-box">
						<button open-type="chooseAvatar" @chooseavatar="chooseAvatarFn" class="btn-hidden">
							<u-avatar :src="formData.avatar"></u-avatar>
						</button>
					</view>
				</view>
				<view class="avatar-container">
					<view class="nickname-txt">昵称</view>
					<view class="nickname-input">
						<input type="nickname" class="weui-input" :value="formData.nickName" @blur="bindblur" placeholder="请输入您的昵称"
							@input="bindinput" />
					</view>
				</view>
				<view class="avatar-container">
					<view class="nickname-txt">手机号码</view>
					<view class="nickname-input">
						<input type="number" class="weui-input" v-model="formData.mobile" placeholder="请输入您的手机号" @input="handleInput"/>
					</view>
				</view>
			</view>
			<view class="mar-top-30 mar-bottom-30 pad-top-30">
				<view class="submit-btn" @click="handleSubmit">提交</view>
			</view>
			<view class="mar-top-30 mar-bottom-30 pad-top-30">
				<view class="submit-btn cancle-btn" @click="handleCancle">以后再说</view>
			</view>
		</view>
	</view>
</template>

<script>
// 系统配置
const ENV_CONFIG = uni.envConfig;
export const apiContextPathSsbd = ENV_CONFIG.baseUrlSsbd;
import {
	mapState,
	mapMutations,
	mapActions
} from 'vuex';
import * as authUtils from '@/utils/authUtils.js';
export default {
	data() {
		return {
			formData: {
				// 账号
				nickName: '',
				// 头像
				avatar: '',
				// token
				token: '',
				//手机号
				mobile: '',
				//user id
				id: '',
			},
			submitLoading: false,
			submitDisabled: false,
			// 显示密码
			showPassword: true,

			// 是否同意协议
			agreement: [true],
			// 记住密码选项值
			rememberPwdCheck: [true],

			//邀请码绑定上级
			distributionCode: null,
		}
	},
	computed: {},
	onLoad() {
		// this.loadPwd();
		// this.getImageCode();
	},
	onShow() {
		let tempOptions = wx.getLaunchOptionsSync();
		console.log('tempOptions');
		console.log(tempOptions);
		console.log(typeof tempOptions.query);
		console.log(tempOptions.query);
		if (!this.isEmptyObject(tempOptions.query)) {
			this.distributionCode = tempOptions.query.distribution_code;
		}
	},
	methods: {
		// 全局状态方法 用户模块
		...mapActions('user', {
			'login': 'login',
		}),
		isEmptyObject(obj) {
			return Object.keys(obj).length === 0 && obj.constructor === Object;
		},
		handleInput(event) {
			event.target.value = event.target.value.replace(/[^\d]/g, '');
		},
		bindblur(e) {
			this.formData.nickName = e.detail.value; // 获取微信昵称
		},
		bindinput(e) {
			this.formData.nickName = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
		},
		chooseAvatarFn(e) {
			let self = this;
			let {
				avatarUrl
			} = e.detail;
			uni.showLoading({
				title: '加载中'
			});
			uni.uploadFile({
				url: apiContextPathSsbd + 'api/file/formImage',
				filePath: avatarUrl,
				name: 'file',
				// header: {
				// 	token: '自己的token',
				// },
				success: uploadFileRes => {
					// 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
					let data = JSON.parse(uploadFileRes.data);
					console.log(data);
					if (data.code === 1) {
						this.formData.avatar = data.data.uri;
					}
				},
				fail: (error) => {
					uni.showToast({
						title: error,
						duration: 2000
					});
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},
		// 是否保存账号密码
		savePwd() {
			let {
				formData
			} = this;
			if (rememberPwdCheck[0] === true) {
				authUtils.rememberPwd(formData.nickname, formData.avatar, formData.token);
			} else {
				authUtils.clearRememberPwd();
			}
		},


		/**
		 * 点击登录
		 */
		handleSubmit() {
			// this.$utils.toPage('/pages/home', true);
			// return;
			
    	let phoneRegex = /^1(3|4|5|7|8|9)\d{9}$/
			if (this.formData.avatar == '') {
				uni.$u.toast("请点击获取头像");
				return;
			} else if (this.formData.nickName == '') {
				uni.$u.toast("请点击获取昵称");
				return;
			} else if (this.formData.mobile == '') {
				uni.$u.toast("请输入您的电话号码");
				return;
			} else if (!(phoneRegex.test(this.formData.mobile))) {
				uni.$u.toast("输入的电话号码有误,请重新输入");
				return;
			}

			uni.showLoading({
				mask: true,
				title: '数据提交中...'
			})
			//	打印临时凭证
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					console.log(loginRes)
					console.log(loginRes.code)

					let formData2 = {
						code: loginRes.code,
						nickname: this.formData.nickName,
						headimgurl: this.formData.avatar,
						mobile: this.formData.mobile,
					}
					this.login(formData2).then(loginRes => {
						console.log('login loginRes=====', loginRes)
						this.formData.nickname = loginRes.data.nickname;
						this.formData.avatar = loginRes.data.avatar;
						this.formData.token = loginRes.data.token;
						this.formData.id = loginRes.data.id;
						let tempObj = {
							nickname: loginRes.data.nickname,
							avatar: loginRes.data.avatar,
							token: loginRes.data.token,
							id: loginRes.data.id,
							distribution_code: loginRes.data.distribution_code,
						}
						this.bindingRelationShip();  //绑定上下级关系
						authUtils.rememberPwd(this.formData.nickname, this.formData.avatar, this.formData.token, tempObj);
						this.$utils.toPage('/pages/home', true);
					}).catch(loginErr => {
						console.log('login loginErr=====', loginErr)
					});
				}
			});
		},
		//取消
		handleCancle() {
			uni.navigateBack({
				delta: 1,
			})
		},
		//绑定上线级
		bindingRelationShip() {
			//绑定上下级二维码
			let obj = {
				code: this.distributionCode,
			}
			this.$api.index.distributionCode(obj).then(res => {
				console.log(res);
			})
		}
	}
}
</script>

<style lang="scss" scoped>

input {
  font-size: 28rpx;
}
.login-content {
	background: #fff;
	height: 100vh;

	.logo-box {
		text-align: center;
		margin: auto;
	}

	::v-deep .u-form-item {
		position: relative;
		padding-bottom: 50rpx;
	}

	::v-deep .u-form-item__body {
		background-color: #fff;
		border-radius: 2em;
		border: 1px solid #ddd;
		padding: 20rpx 40rpx;
	}

	::v-deep .u-form-item__body__right__message {
		padding: 10rpx 0;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 9;
		width: 100%;
	}

	.eye-icon {
		width: 22px;
		height: 22px;
	}

	.code-box {
		position: relative;
		padding-right: 130px;

		::v-deep .u-form-item {
			padding-bottom: 0;
		}

		::v-deep .u-form-item__body__right__message {
			bottom: -48rpx;
		}

		.code {
			position: absolute;
			right: 0;
			top: 0;
			z-index: 9;
			height: calc(100% - 2px);
			width: 118px;
			border: 1px solid #ddd;
		}
	}

	.agreement {
		color: $uni-color-primary;
	}

	::v-deep .u-button--info {
		background: #F4030F;
		color: #fff;

	}
}

.line {
	margin: 30rpx 20rpx 10rpx;
	border-bottom: 1rpx solid #eee;
}

.main-title {
	font-size: 30rpx;
	line-height: 60rpx;
}

.sub-title {
	font-size: 24rpx;
	line-height: 60rpx;
	margin-bottom: 50rpx;
}

.avatar {
	width: 100%;
	height: 100rpx;
}

.nickname {
	width: 100%;
	height: 100rpx;
}

.avatar-img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 20rpx;
	float: right;
}


.avatar-container {
	height: 100rpx;
	width: 100%;
	border-bottom: 1rpx solid #eee;
	line-height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.avatar-txt,
.nickname-txt {
	font-size: 28rpx;
}

.nickname-txt {
	flex: 1;
}

.nickname-input {
	flex: 2;
}

.submit-btn {
	height: 80rpx;
	background: #F4030F;
	border-radius: 40rpx;
	color: #fff;
	text-align: center;
	line-height: 80rpx;
	font-size: 28rpx;
}

.cancle-btn {
	background: #ddd;

}

.btn-hidden {
	border: none !important;
	/* 移除边框 */
	background-color: transparent;
	/* 设置背景为透明 */
	padding: 0;
	/* 移除内边距 */
	margin: 0 !important;
	/* 移除外边距（重要性高，覆盖其他样式） */
	width: auto !important;

	/* 设置宽度自动（重要性高，覆盖其他样式） */
	&::after {
		border: none; //百度平台的需要删掉 & 符号，抖音平台的删掉&符号也是可以的，其他平台没试
	}
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
